<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止冒泡事件-商品列表</title>
    <link rel="stylesheet" href="../css/goods.css">
</head>

<body>
    <div class="container">
        <div class="goods">
            <img class="gimg" src="../img/goods.jpg">
            <div class="tit">
                <span>新疆葡萄</span>
                <span>$9.00/斤</span>
                <img id="h" src="../img/红心.png"></img>
                <img id="hh" style="display: none;" src="../img/空心.png">
            </div>
        </div>
    </div>
</body>
<script src="../作用域/wu.js"></script>
<script>
    //监控页面加载
    $(document).ready(function () {
            $(".goods").click(function(e){
                location.href ="./demo4.html"//点击商品转到详情页
            })
        /**
         * 两张图片切换效果
         * 第一步：写两个图片 第二个图片用样式隐藏
         *第二步：点击第一个图片，把第一个图片隐藏 第二个图片显示
         * jquery实现方案：点击第一个图片，使用jQuery hide（）方法隐藏第一个图片
         *                                   show（）方法显示第二个图片
         * 第三步：点击第二个图片，把第一个图片样式显示，第二个隐藏
        */
        $("#h").click(function (e) {
            //普通切换方案
            //$("#h").css("display", "none")
            //$("#hh").css("display", "inline")
            //jquery实现
            $("#h").hide();
            $("#hh").show();
            e.stopPropagation();//阻止点击事件冒泡到父元素
        })
        $("#hh").click(function (e) {
            //普通切换方案
           // $("#hh").css("display", "none")
            //$("#h").css("display", "inline")
            $("#hh").hide();
            $("#h").show();
            e.stopPropagation();//阻止点击事件冒泡到父元素
        })
    })

</script>

</html>